<template>
  <div>
    <qt-form ref="form" :model="value" :rules="rules">
      <template v-for="(item, index) in config">
        <template v-if="!item.hidden">
          <slot name="custom" v-if="item.type === 'slot'" />
          <qt-select
            v-model="value[item.fieldName]"
            v-else-if="item.type === 'select'"
            :key="index"
            :type="item.type"
            :label="item.label"
            :field-name="item.fieldName"
            :options="item.options"
            :show-key="item.showKey"
            :value-key="item.valueKey"
            :placeholder="item.placeholder"
            :required="item.required"
            :disabled="item.disabled"
            @change="handlerChange"
          />
          <qt-date
            v-model="value[item.fieldName]"
            v-else-if="item.type === 'date' || item.type === 'datetime'"
            :key="index"
            :type="item.type"
            :label="item.label"
            :field-name="item.fieldName"
            :placeholder="item.placeholder"
            :required="item.required"
            :disabled="item.disabled"
            @change="handlerChange"
          />
          <qt-switch
            v-model="value[item.fieldName]"
            v-else-if="item.type === 'switch'"
            :key="index"
            :label="item.label"
            :field-name="item.fieldName"
            @change="handlerChange"
          />
          <qt-input
            v-model="value[item.fieldName]"
            v-else
            :asd="value[item.fildeName]"
            :key="index"
            :type="item.type"
            :label="item.label"
            :field-name="item.fieldName"
            :placeholder="item.placeholder"
            :required="item.required"
            :readonly="item.readonly"
            :right-icon="item.rightIcon"
            :right-text="item.rightText"
            :right-button="item.rightButton"
            @change="handlerChange"
          />
        </template>
      </template>
    </qt-form>
  </div>
</template>

<script>
import { QtInput, QtSelect, QtForm, QtDate, QtSwitch } from '@/components/baseComp';

export default {
  name: 'qtGridForm',

  components: {
    QtInput,
    QtSelect,
    QtForm,
    QtDate,
    QtSwitch,
  },

  props: {
    config: {
      type: Array,
      required: true,
      default() {
        return [];
      },
    },

    value: {
      type: Object,
      required: true,
      default() {
        return {};
      },
    },

    rules: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  data() {
    return {
      compInfo: {},
    };
  },

  methods: {
    submit() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            return resolve(this.config.value);
          } else {
            return reject(new Error(false));
          }
        });
      });
    },

    handlerChange(fieldValue, fieldName) {
      if (typeof fieldValue === 'string') {
        this.$emit('change', String(fieldValue).trim(), fieldName);
        this.$emit('input-enter', String(fieldValue).trim(), fieldName);
      } else {
        this.$emit('change', fieldValue, fieldName);
        this.$emit('input-enter', fieldValue, fieldName);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .van-cell--borderless::after,
  .van-cell:last-child::after {
    display: block;
  }
}
</style>
